<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>12_指令_自定义指令</title>
</head>

<body>

  <!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
  <!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->

  <div id="app">
    <p v-upper-case="text"></p>
    <p v-lower-case="text"></p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">

    // 开发一般使用自定义全局指令
    // 自定义全局指令：对所有组件生效，所有组件都可以直接使用
    // 注意：必须要在new Vue之前调用
    // https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0
    Vue.directive('lower-case', function (el, binding) {
      el.textContent = binding.value.toLowerCase()
    })

    new Vue({
      el: '#app',
      data: {
        text: 'Hello Atguigu'
      },
      // 自定义局部指令：只对当前组件（实例）生效
      directives: {
        // 指令
        // 函数名称就是指令名称：v-upper-case
        // 'upper-case'(el, binding) {
        //   /*
        //     el 绑定指令的DOM元素
        //     binding 是对象，内部包含表达式和表达式的值等内容
        //       value: "Hello Atguigu"
        //   */
        //   // console.log(el, binding.value.toUpperCase());
        //   // el.innerText = binding.value.toUpperCase()
        //   el.textContent = binding.value.toUpperCase()
        // }
        'upper-case': {
          bind(el, binding) {
            el.textContent = binding.value.toUpperCase()
          }
        }
      }
    })
  </script>
</body>

</html>